import React, { useState } from 'react';
import { Button, Col, Form, Input, Row } from 'dw-mx';
import { DownOutlined, UpOutlined } from 'dw-mx-icons';
export default function CollapseForm() {

    const [expand, setExpand] = useState(false);
    const [form] = Form.useForm();

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    };


    return (
        <Form
            form={form}
            {...layout}
            layout={'horizontal'}
        >
            <Row>
                <Col  span={8}>
                    <Form.Item label="模板编号" name="templatenum" rules={[{ required: true }]} >
                        <Input placeholder={"模板编号"} maxLength={10} autoFocus={true}/>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item label="模板名称" name="templatename">
                        <Input placeholder={"模板名称"} allowClear={true}/>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item label="填写须知" name="mustname">
                        <Input placeholder={"填写须知"} readOnly={true}/>
                    </Form.Item>
                </Col>

            </Row>
            {
                expand ?
                    <Row>
                        <Col span={8}>
                            <Form.Item label="模板内容" name="contentname" rules={[{ required: true }]}>
                                <Input.TextArea placeholder={"模板内容"} maxLength={10}/>
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="格式名称" name="formatname">
                                <Input.TextArea placeholder={"格式名称"} maxLength={10}  allowClear={true}/>
                            </Form.Item>
                        </Col>
                        <Col span={8} >
                            <Form.Item label="模板说明" name="explainname">
                                <Input.TextArea placeholder={"模板说明(只读)"} readOnly={true}/>
                            </Form.Item>
                        </Col>
                    </Row>

                    :
                    <Row/>
            }
            <Row>
                <Col span={24}>
                    <Button type="primary" >
                        Search
                    </Button>
                    <Button type="primary" >
                        Clear
                    </Button>
                    <a
                        style={{ fontSize: 12 }}
                        onClick={() => {
                            setExpand(!expand);
                        }}
                    >
                        {expand ? <div><UpOutlined />展开</div>  : <div><DownOutlined /> 收起</div> }
                    </a>
                </Col>
            </Row>
        </Form>
    )
}